<template>
  <div class="AddOrUpdate_main add_container column_one">
    <div class="main_main">

      <div class="formItem_header date_choose">
        将这天设置为
        <div class="formItem_header_operate">
          <el-radio v-model="formData" label="工作日" />
          <el-radio v-model="formData" label="休息日" />
        </div>
      </div>

      <div v-if="formData=='工作日'" class="formItem_header">
        日工作时间表
        <div class="formItem_header_operate">
          <a class="formItem_header_operate_item" @click="addRow">
            <svg-icon icon-class="新增" />
            <div class="item_name">添加</div>
          </a>
          <a class="formItem_header_operate_item delete" @click="deleteRow">
            <svg-icon icon-class="删除" />
            <div class="item_name">删除</div>
          </a>
        </div>
      </div>
      <el-table
        v-if="formData=='工作日'"
        ref="table"
        :data="tableData"
        stripe
        border
        @selection-change="selectionChange"
      >
        <el-table-column
          type="selection"
          width="70"
          align="center"
        />
        <el-table-column label="从" min-width="100">
          <template slot-scope="scope">
            <el-time-picker
              v-model="scope.row.from"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择"
            />
          </template>
        </el-table-column>
        <el-table-column label="至" min-width="100">
          <template slot-scope="scope">
            <el-time-picker
              v-model="scope.row.to"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { supplementAddOrEdit } from '@/api/system/calendar'
import moment from 'moment'
import { mapGetters } from 'vuex'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    row: {},
    defaultValue: {}
  },
  computed: {
    ...mapGetters([
      'companyId'
    ])
  },
  data() {
    return {
      formData: '',
      selectionsAll: [],
      tableData: []
    }
  },
  mounted() {
    this.formData = this.row.type
    this.tableData = this.row.workTimes || []
  },
  methods: {
    onSubmit() {
      if (this.formData == '休息日') {
        this.tableData = []
      }
      // 限制时间表
      let tag = true

      if (tag && this.formData == '工作日' && this.tableData.length == 0) {
        this.$message({
          message: '工作日必须设置工作时间',
          type: 'warning'
        })
        tag = false
      }
      this.tableData.forEach((item, index) => {
        if (tag && !item.from || !item.to) {
          this.$message({
            message: '开始时间或结束时间不能为空',
            type: 'warning'
          })
          tag = false
        }
        if (tag && (moment(item.to, 'HH:mm').isBefore(moment(item.from, 'HH:mm')))) {
          this.$message({
            message: '结束时间必须大于开始时间',
            type: 'warning'
          })
          tag = false
        }
        if (tag && index > 0) {
          if (moment(item.from, 'HH:mm').isBefore(moment(this.tableData[index - 1].to, 'HH:mm'))) {
            this.$message({
              message: '开始时间必须大于上一条的结束时间',
              type: 'warning'
            })
            tag = false
          }
        }
      })

      if (tag) {
        const json = {
          type: this.formData,
          dateTime: this.row.dateStr
        }
        const cacheTableData = []
        this.tableData.forEach(item => {
          cacheTableData.push(item.from + '~' + item.to)
        })
        json.workTime = cacheTableData.join(',')
        supplementAddOrEdit(json).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.$layer.close(this.layerid) // 关闭弹框
          this.$parent.getList() // 调用父组件的刷新方法
        })
      }
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    },
    addRow() {
      const obj = {
        from: '',
        to: ''
      }
      this.tableData.push(obj)
    },
    selectionChange(row) {
      this.selectionsAll = row
    },
    deleteRow() {
      this.selectionsAll.forEach(item => {
        this.tableData.splice(this.tableData.indexOf(item), 1)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main_main{
  padding-top: 0;
}
/deep/ .el-date-editor{
  width: 100%;
  .el-input__inner{
    text-align: left;
  }
}
.date_choose{
  justify-content: left !important;
  border-bottom: 1px solid rgba(186, 203, 236, 1);
  height: 80px !important;
  .formItem_header_operate{
    margin-left: 40px;
    height: 100%;
    .el-radio{
      display: flex;align-items: center;
    }
    /deep/ .el-checkbox-group{
      display: flex;align-items: center;
      height: 100%;
    }
  }
}
</style>
